<!--  -->
<template>
  <div class="poster content_box">
    <div class="header_row flex align-center flex-wrap" v-if="hasBtn('poster:query')">
      <div class="flex align-center m-r-2">
        <span>海报类型：</span>
        <el-select v-model="searchObj.PosterType" placeholder="请选择" clearable>
          <el-option v-for="item in typeOptions" :key="item.EnumName" :label="item.Desction" :value="item.EnumName">
          </el-option>
        </el-select>
      </div>

      <div class="flex align-center m-r-2">
        <span>时间区间：</span>
        <el-date-picker v-model="searchObj.timeValue" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" clearable>
        </el-date-picker>
      </div>

      <el-button type="primary" @click="(searchObj.PageIndex = 1), getListFun()">查询</el-button>
    </div>
    <div class="m-b-1 neck_box flex align-center space-between">
      <div>
        <el-button type="success" @click="(dialogShow = true) ,(form = {})" v-if="hasBtn('poster:upload')">上传海报</el-button>

        <el-button type="info" @click="checkAll" v-if="hasBtn('poster:checked')">全选</el-button>
        <el-button type="danger" @click="deleteAll(false)" v-if="hasBtn('poster:delete')">批量删除</el-button>
      </div>
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchObj.currentPage" :max-height="tableHeight" :page-size="searchObj.pageSize" :page-sizes="[10, 20, 50, 100, 200]" layout="total,sizes, prev, pager, next, jumper" :total="pageTotal">
      </el-pagination>
    </div>
    <div v-loading="loading" ref="posertPool" :style="{ height: tableHeight + 'px' }" class="flex flex-wrap posertPool">
      <div class="poster_item" v-for="item of tableData" :key="item.Id">
        <div class="imgbox" :style="`background-image: url(${item.Path});`" :class="{ isCheck: item.isCheck }">
          <div class="check-target" v-show="item.isCheck">
            <i class="el-icon-check"></i>
          </div>
          <div class="inner can_not_copy">
            <!-- <i class="el-icon-check m-r-2" > -->
            <el-tooltip class="item" effect="light" content="选中" placement="bottom">
              <i class="el-icon-check" @click="checkItem(item)" v-if="hasBtn('poster:checked')"></i>
            </el-tooltip>
            <!-- </i> -->
            <el-tooltip class="item" effect="light" content="放大" placement="bottom">
              <i class="el-icon-zoom-in m-r-2" @click="
                  preImg = item.Path;
                  dialogVisible = true;
                "></i>
            </el-tooltip>
            <el-tooltip class="item" effect="light" content="编辑" placement="bottom">
              <i class="el-icon-edit-outline" @click="(dialogShow = true) ,(form = item)"></i>
            </el-tooltip>
            <el-tooltip class="item" effect="light" content="删除" placement="bottom">
              <i class="el-icon-delete" @click="deleteAll(item)" v-if="hasBtn('poster:delete')"></i>
            </el-tooltip>
            <div v-if="item.Slogan" class="slogan">{{item.Slogan}}</div>
          </div>
        </div>
        <p>{{ PosterTypeName(item.PosterType) }}</p>
        <!-- <el-select
          class="selectAsp"
          :disabled="!hasBtn('poster:edit')"
          v-model="item.PosterType"
          placeholder="海报类型"
          @change="changeItemPosterType($event, item)"
        >
          <el-option
            v-for="item in typeOptions"
            :key="item.EnumName"
            :label="item.Desction"
            :value="item.EnumName"
          >
          </el-option>
        </el-select> -->
      </div>
      <div v-if="tableData.length == 0" v-show="!loading" class="none_box">
        暂无数据
      </div>
    </div>
    <add-poster :dialog-visible.sync="dialogShow" :formData="form" :typeOptions="typeOptions"></add-poster>
    <el-dialog :visible.sync="dialogVisible" width="50%">
      <img style="width: 100%" :src="preImg" alt="" />
    </el-dialog>
  </div>
</template>

<script>
  import { getList, GetPosterType, Delete, Save } from '@/api/ShareSetting/poster'
  import addPoster from './components/addPoster.vue'

  export default {
    //import引入的组件需要注入到对象中才能使用
    name: 'poster',
    components: { addPoster },
    data() {
      //这里存放数据
      return {
        form: {},
        dialogShow: false,
        searchObj: {
          timeValue: null,
          PosterType: '',
          currentPage: 1,
          pageSize: 10,
        },
        tableHeight: 0,
        pageTotal: 0,
        typeOptions: [],
        loading: false,
        tableHeight: 0,
        tableData: [],
        dialogVisible: false,
        preImg: ''
      };
    },
    //监听属性 类似于data概念
    computed: {
      isAll() {
        for (let item of this.tableData) {
          if (!item.isCheck) {
            return false
          }
        }
        return true
      }
    },
    //监控data中的数据变化
    watch: {},

    //方法集合
    methods: {
      changeItemPosterType(e, item) {
        // console.log(e, item)
        let obj = {
          "Id": item.Id,
          "PosterType": e,
          'Path': item.Path
        }
        Save([obj]).then(res => {
          this.$notify({
            title: '修改成功',
            message: res.Msg,
            type: 'success',
            duration: 3000
          })
        }).catch(err => {
          // this.$notify({
          //   title: '修改失败',
          //   message: res.Msg,
          //   type: 'warning',
          //   duration: 3000
          // })
        })
      },
      resizeFun() {
        this.tableHeight = window.innerHeight - this.$refs.posertPool.offsetTop - 150;
      },
      handleSizeChange(val) {
        this.searchObj.pageSize = val
        this.getListFun()
      },
      handleCurrentChange(val) {
        this.searchObj.currentPage = val
        this.getListFun()
      },
      async GetPosterTypeFun() {
        let { Data } = await GetPosterType()
        this.typeOptions = Data || []
      },
      PosterTypeName(e) {
        let obj = this.typeOptions.find(item => item.EnumName == e)
        if (obj) {
          return obj.Desction
        } else {
          return ''
        }

      },
      setTimegetListFun() {
        setTimeout(this.getListFun(), 1000)
      },
      //获取表格列表
      getListFun(SortName = "CreateDate", SortType = true) {
        this.loading = true
        let searchObj = this.$deepClone(this.searchObj)
        let obj = {
          "PosterType": searchObj.PosterType, //方案名称
          "IsPaging": true, //是否分页
          "SortName": SortName, //排序栏位
          "SortType": SortType, //排序类型｛True：正序；Flase：反序｝
          "PageIndex": searchObj.currentPage,
          "PageSize": searchObj.pageSize,
        }
        searchObj.timeValue && (obj['StartTime'] = searchObj.timeValue[0])//开始时间
        searchObj.timeValue && (obj['EndTime'] = searchObj.timeValue[1])//结束时间
        delete searchObj.timeValue
        getList(obj).then(res => {
          // console.log(res)
          this.loading = false
          this.pageTotal = res.Total
          this.tableData = res.Data.map((item, index) => {
            return { ...item, index: (index + 1) + ((searchObj.currentPage - 1) * 10), isCheck: false }
          })
          // console.log(this.tableData)
        }).catch(_ => {
          this.loading = false
          this.tableData = []
          this.pageTotal = 0
        })
      },

      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      checkItem(row) {
        let status = row.isCheck
        this.$set(row, 'isCheck', !status)
      },
      checkAll() {
        let status = false
        if (!this.isAll) {
          status = true
        } else {
          status = false
        }
        this.tableData.forEach(item => {
          // item = {...item,isCheck:true}
          item.isCheck = status
        })
      },

      deleteAll(row) {
        this.$confirm('确认删除所选数据吗？').then(async _ => {
          let newArr
          if (row) {
            newArr = [
              { Id: row.Id }
            ]
          } else {
            newArr = this.tableData.filter(item => {
              return item.isCheck
            })
            newArr = newArr.map(item => {
              return { Id: item.Id }
            })
          }
          let { Msg } = await Delete(newArr)
          this.$notify({
            title: '提示',
            message: Msg,
            type: 'success',
            duration: 2000
          })
          this.getListFun()
        })
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.GetPosterTypeFun()
      this.getListFun()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      this.$nextTick(() => {
        this.resizeFun()
      })
      window.addEventListener('resize', this.resizeFun)

    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() {
      window.removeEventListener('resize', this.resizeFun)
    }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
//@import url(); 引入公共css类
<style  scoped>
  .posertPool {
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    /* border: 1px solid #eee; */
  }

  .poster_item {
    width: 19.5%;
    height: 49%;
    box-sizing: border-box;
    padding: 10px 20px;
  }
  .poster_item > .imgbox {
    width: 100%;
    height: 90%;
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .poster_item > p {
    border-bottom: 1px solid rgba(51, 51, 51, 0.1);
    padding-bottom: 10px;
    text-align: center;
  }

  .imgbox:hover > div.inner {
    opacity: 1;
    background-color: rgba(51, 51, 51, 0.5);
  }
  .imgbox > div.inner {
    transition: background-color 0.2s;
    opacity: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: calc((85vh - 170px) / 2);
  }
  .imgbox > div.inner > i {
    cursor: pointer;
    font-size: 30px;
    color: #ececec;
  }
  .imgbox > div.inner > i:hover {
    color: #3382af;
  }
  .check-target {
    position: absolute;
    right: 0;
    top: 0;
    background-color: rgba(211, 211, 211, 0.3);
    border-bottom-left-radius: 100%;
    width: 30px;
    height: 30px;
  }
  .imgbox.isCheck {
    border: 1px solid rgba(46, 185, 56, 0.15);
  }
  .check-target > i {
    font-size: 20px;
    color: #06b002;
    position: absolute;
    font-weight: bold;
    left: 28%;
    top: 10%;
  }
  .none_box {
    text-align: center;
    width: 100%;
    margin-top: 30px;
    font-size: 22px;
    color: #999;
  }
  .selectAsp {
    margin: 10px auto;
    left: 50%;
    transform: translateX(-50%);
  }
  .slogan {
    transform: translateY(-150px);
    color: #fff;
    height: 30px;
    line-height: 30px;
  }
  .selectAsp-1 {
    font-size: 16px !important;
    margin-right: 15px;
  }
  .item {
    margin-right: 10px;
  }
</style>